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Managing Text Flow by 
Using CSS 


3.3. Manage the flow of text content by using CSS. 
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CSS Regions 


¢ With HTML you can organize content 
into separate section, but what can you 
do if you want content to flow from one 
region to another? 


° CSS Regions are sections of a 
document where content can flow from 
one region to another 


¢ If there is too much content in one 
section, then the remaining content 
automatically flows into another 
region 
¢ Regions can be placed anywhere on a 
screen, as evidenced in the graphic to 
the right 


Implementing CSS Regions 


¢ Creating a CSS Region, you must specify a content source 
and content containers 
¢ You set up CSS regions with the flow-into and flow- from properties 
¢ Acontent source is a chunk of text that holds the content you 
want to flow through the regions 


¢ Content containers are the areas where you want your content 
to appeal 
¢ You should use a separate HTML document as the source 


<div id="content" 
src="content.html"></div> 

<div id="regionl" class="region"></div> 
<div id="region2" class="region"></div> 
<div id="region3" class="region"></div> 


flow- from and flow-into Properties 


Using an id as a Selector, 

identify the content source 

using the main value of the 

flow-into property 

¢ This content will require content 
containers to appear on a Web page 


With a specific class as the 
selector, use the same value 
used with the flow- into 
property for the value of the 
flow- from property to place 
content into a container 


¢ This is how the source and content 
containers are associated 


#content { 
-ms-flow-into: main; 


} 


.region { 
-ms-flow-from: main; 
background: #9ACD32; 
width: 150px; 
height: 200px; 
float: left; 
margin: 20px; 


Overflowing Text 


The height of a region won't 
automatically adjust to fit all 
content 

° height of regions must be defined 


lf there is content available after 
all regions have been filled, then 
the last region will: 

° be cut off 

° visibly overflow 

° overflow and be hidden 

The overflow and region- 
fragment properties can be used 
to control how overflow content Is 
treated 

° set region-fragment to auto or break 


Lorem ipsum dolor sit 
amet, consectetur 
adipiscing elit. Fusce 
sed efficitur sapien. 
Nunc pellentesque 
eget turpis at blandit. 
Sed at sapien sed 


dolor posuere sodales. 


Sed non pulvinar 
purus. Morbi 
bibendum enim quis 
leo tempus, vitae 
accumsan lacus 


y, 


visible overflow 


tincidunt. Integer 
pulvinar tortor vitae 
magna gravida 
ullamcorper. 
Vestibulum eget 
Sapien metus. Mauris 
tempor faucibus 
vehicula. Aliquam 
finibus sed libero eget 
congue. 


Lorem ipsum dolor sit 
amet, consectetur 
adipiscing elit. Fusce 
sed efficitur sapien. 


The Microsoft Implementation of CSS 


Regions using div tags to implement CSS regions, Microsoft 
uses the <iframe> element 

¢ An iframe is used with unique IDs, as well as the —ms— vendor 
prefix with the flow- from and flow- into properties 


<iframe id="content" 
Src="content.html"></1if rame> 

<div id="regionl" class="region"></div> 
<div id="region2" class="region'"></div> 
<div id="region3" class="region'"></div> 


CSS Regions tn Action 


#content { 
<!DOCTYPE html> -ms-flow-into: main; 
<html lang="en"> i; 
<head> 
<meta charset="utf-8" /> ee a ene ase 
-ms - - in; 
<link href="StyleSheet.css" rel="stylesheet" Pere enti 
fypesext/cee'= ms-region-fragment: 
auto; 
overflow: visible; 
<title>Overflow Examples</title> background: #0fT; 
</head> width: 150px; 
<b> ae oe 
oat: eft; 
ai Go> Bed tls ene | margin: 20px: 
<iframe id="content" src="content.html"></iframe> } 


<div id="regionl" class="region"></div> 
<div id="region2" class="region"></div> 
<div id="region3" class="region"></div> 


</body> 
</html> 


Columns and 
Hyphenation 


Bae 


Creating Columns 


CSS allows you to create 
columns and divide content 
among them 

¢ this is called the multi-column layout 


There are three primary CSS 
properties that you can use to 
manipulate columns: 

¢ column-count 

¢ column-gap 

¢ column-rule 

In the CSS Box, columns are in 
between the content and the 
Box 


Three Columns 


Lorem ipsum dolor 
sit amet, 
consectetur 
adipiscing elit. Fusce 
sed efficitur sapien. 
Nunc pellentesque 
eget turpis at 
blandit. Sed at 
sapien sed dolor 
posuere sodales. 
Sed non pulvinar 
purus. Morbi 
bibendum enim quis 
leo tempus, vitae 
accumsan lacus 
tincidunt. Integer 
pulvinar tortor vitae 
magna gravida 
ullamcorper. 
Vestibulum eget 
sapien metus. 


faucibus vehicula. 
Aliquam finibus sed 
libero eget congue. 


Phasellus fringilla a 
lacus quis tempor. 
Nulla quis commodo 
purus. Integer vitae 
orci quis quam 
congue scelerisque. 
In sodales augue 
tellus, id 
ullamcorper felis 
aliquet molestie. 
Fusce sodales 
semper augue id 
varius. Suspendisse 
lobortis cursus dolor 
eu tincidunt. 
Praesent et tortor a 
quam auctor 
tincidunt non ac 
odio. In varius, felis 
et molestie eleifend, 
te eden rhoncus 


ne a dui. Sed at 
efficitur tortor. 


Praesent interdum 
cursus ex vel 
ullamcorper. 


Column Properties, pt. 1 


break-after 


break-before 


auto 

always 

avoid 

left 

fankelane 

page 

column 
region 
avoid-page 
avoid-column 
avoid-region 


(Same as break-after) 


Inserts a break after the generated column 
box 


Inserts a break before the generated column 
box 


Column Properties, pt. 2 


break-inside 


column-count 


column- fill 


column-gap 


auto 

avoid 
avoid-page 
avoid-column 
avoid-region 
integer 

auto 

auto 

balance 


Length 
normal 


Inserts a break within the generated column 
box 


Sets the number of columns an element will 
use 


Specifies how to fill columns; balances 
content equally between columns, if possible, 
or fills columns sequentially 


Specifies the gap between columns 


Column Properties, pt. 3 


column-rule 


column-rule- 
color 


column-rule- 
style 


column-rule- 
width 


column-span 


column- rule-width 
column-rule-style 
column-rule-color 
transparent 


color 


border-style 


border width 


none 
all 


Is a Shorthand property that sets the column- 
rule-width, column-rule-style, and column- 
rule-color properties at the same place ina 
style sheet 


Specifies the color of the rule between 
columns 


Specifies the style of the rule between 
columns, such as solid or double, dashed, and 
so on 


Specifies the width of the rule between 
columns 


Specifies whether an element should span no 
columns or all columns 


Column Properties, pt. 4 


column-width Length 
auto 


columns column-width Sets the column-width and column-count 
column-count properties simultaneously 


Specifies the width of a column or columns 


Using Hyphenation 


lf you want text to cover the 
entirety of a column, then 
you can enable hyphenation 
Hyphenation is the process of 
connecting two parts of the 
Same word with a hyphen (-) 


¢ To implement hyphenation, 


use the hyphens property 
along with one of three 
values: 


* auto: enables hyphenation 
* manual: enables hyphenation 
* none: prevents hyphenation 


.hyphenized { 
-moz-hyphens: auto; 
-ms-hyphens: auto; 
-webkit-hyphens: 

auto; 
hyphens: auto; 


Declaring a Language 


¢ For automatic hyphenation to properly function, you have to 
declare which language is being used 
¢ To do so, use the <html> tag with the Lang attribute 
¢ The value should be set according to the language being used 
¢ Vendor prefixes must also be applied with the hyphens 
property in CSS for them to work properly 


<html Lang="en"> 


Columns Demo 


<h2>Three Columns</h2> 

<div class="threeColumns”> 
<p>Lorem ipsum dolor ..</p> 
<p>Phasellus fringilla a..</p> 

</div> 


.threeColumns { 
width: 100px; 
-webkit-column-count: 3; 
-moz-column-count: 3; 
column-count: 3; 


CSS Exclusions 
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CSS Exclusions 


¢ A CSS Exclusion, commonly referred to as a positioned float, 
allows you to place elements in a specific location on a Web 
page 

¢ After you position the float, other content will wrap around it 


¢ CSS Exclusions allow you to specify positioning from the top, 
bottom, left, and right ofa container 


e 
Exclusions ci The uk = —_—— vootiate dog. The auick rest re over the lazy dog. The quick 


brown fox jumps over the lazy dog. The quick brown fox jumps over the lary dag. The quick brown fox 
jumps over the lazy dog. The quick brown fox jumps over the lazy dog. 


The quick brown fox jumps over 
jumps over the lary dag. The quick 


I | the lary dog. The quick brawn fox 
; af uy dag. brown fox jure over the lacy dog. The 
% pumps over tt lazy dog. The quick brown fox purrs 
overthe lary dog. The quick brow [i fox jumps over the lary dag. 


guick brown fox pumps over the 


The quick brown fox jumps over the lary dog. The quick brown fox pumps over the lazy dog. The quick 
brown fox jumps ower the lazy dog. The quick brown fox jumps over the lary dag. The quick brown fox 
jump: over the lary dog. The quick brown fox pumps ower the lazy dog. 


Creating CSS Exclusions 


* Declare an exclusion by using = .exclusion {. 
the wrap- flow property with -ms-grid-row: 2; 
the preferred value -ms-grid-column: 2;— 

* Modify the shape of an background-color: lime; 
exclusion using the shape- eatteae ies nonin 
eater shape-inside -mS-wrap-margin: 15px; 

¢ CSS Exclusions may not be 
supported by all of the major 
browsers 


¢ Use vendor prefixes and experiment 
with as many browsers as possible to 
make sure the content renders properly 


Properties for CSS Exclusions, pt. 1 


shape-outside auto Creates the general shape of an exclusion 
shape 
url 


Shape-inside outside-shape Modifies a shape’s content 
auto 
Shape 
url 

wrap wrap- flow A shorthand method of setting wrap-flow, 
wrap-margin wrap-margin, and wrap-padding properties in 
wrap- padding one declaration 


Properties for CSS Exclusions, pt. 2 


wrap- f Low auto Specifies how exclusions affect inline content 
both within block-level elements 
Start 
end 
maximum 
clear 
wrap-margin Length Provides an offset for content outside the 
element 
wrap-padding Length provides a pad (offset) for content inside an 
element 
wrap-through wrap Specifies how content should wrap around an 


none exclusion element 


More About CSS Exclusions 


https://msdn.microsoft.com/en-us/library/Nh673558(v=vs.85). 
asox 


Summary 
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